<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园报投稿系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>校园报投稿系统</h1>
            <p class="subtitle">分享你的精彩故事</p>
        </div>
    </header>

    <main>
        <div class="container">
            <section class="id-search-section">
                <h2>投稿查询</h2>
                <p>输入投稿ID查询你的投稿状态</p>
                <div class="id-search-container">
                    <input type="text" id="searchIdInput" placeholder="请输入投稿ID">
                    <button id="searchIdButton" class="btn btn-primary">查询</button>
                </div>
                <div id="searchResult" class="search-result">
                    <!-- 查询结果将在这里显示 -->
                </div>
            </section>

            <section class="contribution-form">
                <h2>投稿须知</h2>
                <p>欢迎向校园报投稿！请填写以下信息并提交你的文章。投稿无需登录，仅需选择年级、班级并输入姓名即可。</p>
                
                <form id="contributionForm">
                    <div class="form-group">
                        <label for="grade">年级 <span class="required">*</span></label>
                        <select id="grade" name="grade" required>
                            <option value="">请选择年级</option>
                            <option value="1">一年级</option>
                            <option value="2">二年级</option>
                            <option value="3">三年级</option>
                            <option value="4">四年级</option>
                            <option value="5">五年级</option>
                            <option value="6">六年级</option>
                            <option value="7">七年级</option>
                            <option value="8">八年级</option>
                            <option value="9">九年级</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="class">班级 <span class="required">*</span></label>
                        <select id="class" name="class" required>
                            <option value="">请选择班级</option>
                            <option value="1">1班</option>
                            <option value="2">2班</option>
                            <option value="3">3班</option>
                            <option value="4">4班</option>
                            <option value="5">5班</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="name">姓名 <span class="required">*</span></label>
                        <input type="text" id="name" name="name" placeholder="请输入你的姓名" required>
                    </div>

                    <div class="form-group">
                        <label for="title">文章标题 <span class="required">*</span></label>
                        <input type="text" id="title" name="title" placeholder="请输入文章标题" required>
                    </div>

                    <div class="form-group">
                        <label for="category">文章分类 <span class="required">*</span></label>
                        <select id="category" name="category" required>
                            <option value="">请选择分类</option>
                            <option value="1">校园故事</option>
                            <option value="2">学习心得</option>
                            <option value="3">科技创新</option>
                            <option value="4">艺术文化</option>
                            <option value="5">体育活动</option>
                            <option value="6">其他</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="content">文章内容 <span class="required">*</span></label>
                        <textarea id="content" name="content" rows="10" placeholder="请输入你的文章内容..." required></textarea>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">提交投稿</button>
                    </div>
                </form>
            </section>

            <section class="preview-section" id="previewSection">
                <h2>投稿预览</h2>
                <div class="preview-container" id="previewContainer">
                    <div class="preview-info">
                        <span id="previewGrade">年级：-</span>
                        <span id="previewClass">班级：-</span>
                        <span id="previewName">姓名：-</span>
                    </div>
                    <h3 id="previewTitle">标题：-</h3>
                    <p class="preview-category" id="previewCategory">分类：-</p>
                    <div class="preview-content" id="previewContent">
                        内容预览将在这里显示...
                    </div>
                </div>
            </section>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2024 校园报投稿系统 版权所有</p>
            <p><a href="/admin" class="admin-link">管理后台入口</a></p>
        </div>
    </footer>

    <div class="modal" id="successModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>投稿成功</h3>
                <button type="button" class="close-btn" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <p>你的投稿已成功提交！我们会尽快审核，请耐心等待。</p>
                <p>投稿编号：<span id="submissionId">-</span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="closeModal()">确定</button>
            </div>
        </div>
    </div>

    <script src="js/script.js"></script>
    <script src="js/search.js"></script>
</body>
</html>